﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>管理员登录</title>
    <link href="~/Administrator/css/style.css" rel="stylesheet" />
    <link href="~/Administrator/css/reset.css" rel="stylesheet" />
</head>
<body>
    <div>
        @using (Html.BeginForm("AdministratorLogin", "Administrators", FormMethod.Post))
        {
            <div id="particles-js">
                <div class="login">
                    <div class="login-top">
                        管理员登录
                    </div>
                    <div class="login-center clearfix">
                        <div class="login-center-img"><img src="~/Administrator/images/name.png" /></div>
                        <div class="login-center-input">
                            <input type="text" name="BName" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'" />
                            <div class="login-center-input-text">用户名</div>
                        </div>
                    </div>
                    <div class="login-center clearfix">
                        <div class="login-center-img"><img src="~/Administrator/images/password.png" /></div>
                        <div class="login-center-input">
                            <input type="password" name="BPassword" value="" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'" />
                            <div class="login-center-input-text">密码</div>
                        </div>
                    </div>
                    <div  style="text-align:center">
                        <input type="submit" class="login-button" name="dlbtn" value="登录" />
                    </div>
                </div>
                <div class="sk-rotating-plane"></div>
            </div>
        }
        <!-- scripts -->
        <script src="~/Administrator/js/particles.min.js"></script>
        <script src="~/Administrator/js/app.js"></script>
        @* 表单验证jq *@
        <script type="text/javascript">
            function hasClass(elem, cls) {
                cls = cls || '';
                if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
                return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
            }

            function addClass(ele, cls) {
                if (!hasClass(ele, cls)) {
                    ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
                }
            }

            function removeClass(ele, cls) {
                if (hasClass(ele, cls)) {
                    var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
                    while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                        newClass = newClass.replace(' ' + cls + ' ', ' ');
                    }
                    ele.className = newClass.replace(/^\s+|\s+$/g, '');
                }
            }
            //点击登录后的动画
            document.querySelector(".login-button").onclick = function () {
                addClass(document.querySelector(".login"), "active")
                setTimeout(function () {
                    addClass(document.querySelector(".sk-rotating-plane"), "active")
                    document.querySelector(".login").style.display = "none"
                }, 800)
                setTimeout(function () {
                    removeClass(document.querySelector(".login"), "active")
                    removeClass(document.querySelector(".sk-rotating-plane"), "active")
                    document.querySelector(".login").style.display = "block"
                    //直接输出
                }, 5000)
            }</script>
    </div>
</body>
</html>
